<template>
  <view>
    <div class="gk-sticky">
      <uni-search-bar
        style="flex: 1"
        radius="100"
        class="search-btn"
        @confirm="searchClick"
        :focus="false"
        v-model="inputValue"
        @clear="searchClick"
        placeholder="请输入关键字"
        cancelButton="none"
      >
      </uni-search-bar>
      <div @click="searchClick">搜索</div>
    </div>
    <scroll-view
      class="scroll-height"
      @scrolltolower="lower"
      scroll-y
      enable-back-to-top
    >
      <view class="device-list">
        <!-- 循环体 -->
        <view
          class="device-list-item"
          :data-bid="item.bid"
          :data-cdzOrdpc="item.cdzOrdpc"
          :data-distance="item.distance"
          :data-sd="item.station_id"
          v-for="(item, index) in stationsList"
          :key="index"
        >
          <view class="device-item-title" @click="onItemClick(item)">
            {{ item.station_name }}
          </view>

          <view class="device-item-main">
            <view @click="onItemClick(item)">
              <uni-tag
                :inverted="true"
                :text="stationType(item.station_type)"
                type="warning"
                size="small"
                class="uni-tag"
              />
              <view class="price-empty">
                <view class="price">
                  <text class="rmb-icon">¥</text>
                  {{ item.station_price }}
                  <text class="price-du">/度</text>
                </view>
                <view class="empty"
                  >空闲:{{
                    freeNum(item.nums_free_kuai, item.nums_free_man)
                  }}</view
                >
              </view>
            </view>
            <view class="device-item-distance">
              <view class="left-area"
                >{{ item.station_area }} {{ item.station_address }}</view
              >
              <view
                class="icon-area"
                @tap="clickOpenNav"
                :data-lat="item.station_lat"
                :data-lon="item.station_lon"
                :data-name="item.station_name"
                :data-address="item.station_address"
              >
                <image
                  class="icon-area-img"
                  src="/static/images/icon_distance.png"
                ></image>
                {{ changeDistance(item.distance) }}km
              </view>
            </view>
          </view>
        </view>
        <view class="bottomTip" v-if="isLower">
          <view class="bottomTxt">~没有更多数据了~</view>
        </view>
      </view>
    </scroll-view>
    <TabBarCus pageName="stationList" />
  </view>
</template>
<script>
const app = getApp();
let Sign = app.globalData.Sign;
let Store = app.globalData.Store;
let Api = app.globalData.Api;
import { changeDistance, stationType, openNav } from "../../utils/util.js"
import TabBarCus from "../../components/TabBarCus.vue";
export default {
  components: { TabBarCus },
  data() {
    return {
      changeDistance: changeDistance,
      stationType: stationType,
      isLoadingMore: true,
      stationsList: [],
      inputValue: '',
      pageCount: 0,
      isLower: false,
    };
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    this.getStationListInfo();
  },
  onShow: function () {
    uni.hideTabBar()
  },
  //下拉刷新
  onPullDownRefresh() {
    uni.showNavigationBarLoading();
    this.isLoadingMore = false
    this.onLoad({});
    uni.stopPullDownRefresh();
  },
  methods: {
    freeNum(kuai, man) {
      return kuai + man;
    },
    lower(e) {
      console.log(e);
      console.log('到底部了');
      // this.setData({
      this.isLower = true
      // });
    },

    onChange(e) {
      this.inputValue = e.detail
    },

    onClick() {
      this.getStationListInfo();
    },

    searchClick() {
      //关键词搜索
      this.getStationListInfo();
    },

    //获取站点信息
    getStationListInfo() {
      // Toast.loading({
      //   message: '加载中...',
      //   forbidClick: true,
      //   duration: 0
      // });
      let station_lon = Store.getItem('longitude');
      let station_lat = Store.getItem('latitude');
      let search_key = encodeURIComponent(this.inputValue);
      if (station_lon == null || station_lat == null) {
        uni.showToast({
          title: '定位失败',
          icon: 'none'
        });
      } else {
        const signObject = {
          station_lon,
          station_lat,
          search_key
        };
        const signvalue = Sign.signutil(signObject);
        app.globalData
          .get(Api.getStationList, {
            station_lon,
            station_lat,
            search_key,
            sign: signvalue
          })
          .then((res) => {
            // Toast.clear();
            console.log(res.station_list);
            //2 获取站点信息
            // this.setData({
            this.stationsList = res.station_list,
              this.isLoadingMore = false
            this.isLower = true
            // });
          })
          .catch((e) => {
            // Toast.clear();
            console.log(e);
          });
      }
    },

    //查看站点信息
    onItemClick(item) {
      console.log('item: ', item);
      if (92 == item.cdzordpc) {
        uni.navigateTo({
          url: '/pages/stationDpcInfo/stationDpcInfo?stationIdAndDistance=' + item.bid + ',' + item.distance
        });
      } else {
        uni.navigateTo({
          url: '/pages/stationTidInfo/stationTidInfo?stationIdAndDistance=' + item.bid + ',' + item.distance
        });
      }
    },
    clickOpenNav(event) {
      var { lat, lon, name, address } = event.currentTarget.dataset;
      console.log(lat, lon, name, address);
      openNav(lat, lon, name, address);
    }
  }
};
</script>
<style >
@import "./stationList.css";
</style>
